<template>
  <view :data-theme="globPrimary">
    <u-navbar title="资讯" :custom-back="onBack">
      <view class="navbar-btn" slot="right" @click="show = !show"
        ><u-icon
          name="shaixuan"
          custom-prefix="edu-icon"
          size="40"
          :color="globPrimaryColor"
        ></u-icon
      ></view>
    </u-navbar>
    <view class="topic-wrap">
      <edu-mescroll-body @init="mescrollInit" @down="refresh" @up="getTopicList">
        <view class="banner" v-if="!$u.test.empty(bannerList)"
          ><u-swiper
            :list="bannerList"
            name="image_url"
            :height="280"
            @click="bannerPath"
          ></u-swiper
        ></view>
        <view class="list">
          <view
            class="item u-border-bottom"
            v-for="(item, index) in topicList"
            :key="index"
            @click="tolink(item.id)"
          >
            <view class="left">
              <view class="title u-line-1">{{ item.title }}</view>
              <view class="abstract u-line-1">{{ item.abstract }}</view>
              <view class="desc">
                <view
                  ><u-icon
                    name="eye"
                    :label="item.read_count"
                    size="26rpx"
                    color="#909399"
                    label-size="26rpx"
                    label-color="#909399"
                  ></u-icon
                ></view>
                <u-line color="#E4E7ED" direction="col" length="16rpx" margin="0 20rpx"></u-line>
                <view>{{ item.publish_time | timeFrom }}</view>
              </view>
            </view>
            <edu-image
              width="256rpx"
              height="144rpx"
              :src="item.cover_url"
              borderRadius="4"
            ></edu-image>
          </view>
        </view>
      </edu-mescroll-body>
    </view>
    <u-popup v-model="show" mode="right">
      <view
        :style="{
          width: '100%',
          height: globStatusBarHeight + 'px',
        }"
      ></view>
      <u-icon
        @click="show = false"
        name="close"
        class="category-close"
        :style="{ top: globStatusBarHeight + 15 + 'px' }"
      ></u-icon>
      <view class="category-title u-border-bottom">资讯</view>
      <view
        class="category-wrap"
        :style="{
          height: globWindowHeight - globStatusBarHeight - 50 + 'px',
        }"
      >
        <scroll-view
          scroll-y
          scroll-with-animation
          class="tab-view menu-scroll-view"
          :scroll-top="scrollTop"
        >
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            class="tab-item"
            :class="[current == index ? 'active' : '']"
            @tap.stop="swichMenu(index)"
          >
            <text class="u-line-1">{{ item.title }}</text>
          </view>
        </scroll-view>
        <block v-for="(item, index) in categoryList" :key="index">
          <view class="right-box" v-if="current == index">
            <scroll-view scroll-y>
              <view class="page-view">
                <view
                  class="class-title"
                  :class="[categoryId == item.id ? 'active' : '']"
                  @click="chooseCategoryId(item.id)"
                >
                  <text>全部</text>
                  <u-icon name="arrow-right"></u-icon>
                </view>
                <view class="class-item" v-for="(item1, index1) in item.child" :key="index1">
                  <view
                    class="item-title"
                    :class="[categoryId == item1.id ? 'active' : '']"
                    @click="chooseCategoryId(item1.id)"
                  >
                    <text class="u-line-1">{{ item1.title }}</text>
                    <u-icon name="arrow-right"></u-icon>
                  </view>

                  <view class="item-container">
                    <view class="thumb" v-for="(item2, index2) in item1.child" :key="index2">
                      <view
                        class="name u-line-1"
                        :class="[categoryId == item2.id ? 'active' : '']"
                        @click="chooseCategoryId(item2.id)"
                        >{{ item2.title }}</view
                      >
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </block>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {
      bannerList: [],
      topicList: [],
      show: false,
      current: 0,
      scrollTop: 0,
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      categoryList: [],
      categoryId: 0,
      params: {
        mhm_id: 1,
      },
    }
  },
  computed: {
    ...mapState({
      globSchoolId: (state) => state.projectSetting.globSchoolId,
    }),
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
      globWindowHeight: 'projectSetting/globWindowHeight',
    }),
  },
  onLoad(option) {
    this.params.mhm_id = this.globSchoolId
    if (!this.$u.test.empty(option)) {
      this.params.mhm_id = option.mhm_id
    }
    this.getBannerList()
    this.getCategoryList()
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  methods: {
    tolink(id) {
      this.$edu.route('/pageFound/topic/details', {
        id: id,
      })
    },
    // 获取banner数据
    getBannerList() {
      this.$edu.api
        .getConfigBanner({
          ...this.params,
          type: 'topic',
        })
        .then((res) => {
          const { data } = res
          this.bannerList = data
        })
    },
    // 获取分类数据
    getCategoryList() {
      this.$edu.api
        .getCategory({
          ...this.params,
          type: 5,
        })
        .then((res) => {
          const { data } = res
          this.categoryList = data
        })
    },
    // 获取资讯数据
    getTopicList(page) {
      this.$edu.api
        .getTopicList({
          ...this.params,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          let list = data.data
          let total = data.total

          if (page.num == 1) this.topicList = []
          this.topicList = this.topicList.concat(list)
          this.mescroll.endBySize(list.length, total)
        })
    },
    // 下拉刷新
    refresh() {
      this.getBannerList()
      this.mescroll.resetUpScroll()
    },
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (index == this.current) return
      this.current = index
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('menu-scroll-view', 'menuHeight')
        await this.getElRect('tab-item', 'menuItemHeight')
      }
      // 将菜单菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select('.' + elClass)
          .fields({ size: true }, (res) => {
            // 如果节点尚未生成，res值为null，循环调用执行
            if (!res) {
              setTimeout(() => {
                this.getElRect(elClass)
              }, 10)
              return
            }
            this[dataVal] = res.height
          })
          .exec()
      })
    },
    // 分类选择
    chooseCategoryId(id) {
      if (id == this.categoryId) return
      this.categoryId = id
      this.show = false
      this.params = {
        ...this.params,
        category: id,
      }
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // banner跳转
    bannerPath(index) {
      let data = this.bannerList[index]
      if (data.link_type == 1) {
        this.$u.route('/pageCourse/course/details', {
          id: data.link_data_id,
        })
      } else if (data.link_type == 2) {
        // #ifdef H5
        window.open(data.link_href)
        // #endif
      }
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar-btn {
  margin-right: 30rpx;
}
.topic-wrap {
  min-height: calc(100vh - 44px);
  background-color: #fff;
  .banner {
    margin-top: 20rpx;
    padding: 0 30rpx;
  }
  .list {
    margin-top: 20rpx;
    padding-left: 30rpx;
    .item {
      display: flex;
      padding: 30rpx 30rpx 22rpx 0;
      .left {
        width: calc(100% - 256rpx);
        padding-right: 20rpx;
      }
      .title {
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
      }
      .abstract {
        margin-top: 10rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: $edu-content-color;
      }
      .desc {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        color: $edu-tips-color;
        font-size: 26rpx;
        font-weight: 400;
      }
    }
  }
}
.category-close {
  position: absolute;
  left: 30rpx;
  z-index: 10;
}

.category-title {
  height: 100rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: $edu-main-color;
  display: flex;
  align-items: center;
  justify-content: center;
}
.category-wrap {
  display: flex;
  overflow: hidden;
  background-color: #fff;
  .tab-view {
    width: 210rpx;
    height: 100%;
    background: #f7f7f7;
    .tab-item {
      height: 120rpx;
      padding: 0 10rpx;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: $edu-content-color;
      font-weight: 400;
      &.active {
        position: relative;
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        background-color: #ffffff;
        &::before {
          content: '';
          position: absolute;
          border-left-width: 6rpx;
          border-left-style: solid;

          @include border-color();
          height: 120rpx;
          left: 0;
          top: 0;
        }
      }
    }
  }
  .right-box {
    width: calc(100vw - 210rpx);
  }
  .page-view {
    padding: 30rpx;
    background-color: #fff;
    .class-title {
      font-size: 30rpx;
      font-weight: 500;
      color: $edu-main-color;
      margin-bottom: 50rpx;
      &.active {
        @include text-color();
      }
    }
    .class-item {
      border-radius: 8rpx;
      .item-title {
        display: flex;
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        margin-bottom: 30rpx;
        &.active {
          @include text-color();
        }
      }
      .item-container {
        display: flex;
        flex-wrap: wrap;
        margin-left: -14rpx;
        margin-right: -14rpx;
        .thumb {
          padding: 0 14rpx;
          margin-bottom: 40rpx;
        }
        .name {
          max-width: 480rpx;
          padding: 0 20rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #f7f7f7;
          border-radius: 32px;
          font-size: 28rpx;
          font-weight: 400;
          color: $u-main-color;
          &.active {
            @include text-color();
          }
        }
      }
    }
  }
}
</style>
